<template>
  <div class="classifys-detail">
    <van-search
      class="info_search input_text"
      v-model="value"
      @search="onSearch"
      @clear="clearSearch"
      placeholder="搜索"
    />
    <van-tabs @click="onClick">
      <van-tab
        v-for="(item, index) in classifysChildren"
        :title="item.text"
        :name="item.CCode"
        :key="index"
      >
        <van-list
          style="margin: 10px"
          :finished="finished"
          v-model="loading"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div v-if="historyList.length">
            <div v-for="(v, i) in historyList" :key="i" class="history-content">
              <!-- <div class="history-title">【检查对象】{{ v.CFullName }}</div>
					<div class="line"></div> -->
              <div class="history-title">【关键词】{{ v.Keyword }}</div>
              <div class="line"></div>
              <div>【隐患描述】{{ v.HiddenDangerDesc }}</div>
              <div>【整改建议】{{ v.CorrectiveAdvise }}</div>
              <div class="apply-area">
                <div class="detail-collect">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_industry.png"
                    alt=""
                  />
                  <span>适用地区:{{ v.ApplyArea }}</span>
                </div>
              </div>
              <div class="apply-area">
                <div class="detail-collect">
                  <div @click="getDetail(v)">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_detail.png"
                      alt=""
                    />
                    <span>详细</span>
                  </div>

                  <div v-if="v.IsCollected" @click="unCollected(v)">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_collect.png"
                      alt=""
                    />
                    <span>取消收藏</span>
                  </div>
                  <div v-else @click="Collect(v)">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_notcollect.png"
                      alt=""
                    />
                    <span>收藏</span>
                  </div>
                  <div @click="Ignored(v)" v-if="hasPhoto">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_ignore.png"
                      alt=""
                    />
                    <span>忽略该依据</span>
                  </div>
                </div>
                <!-- <div class="take-photo">
							<img src="@/assets/Images/AppIcon/icon_camera.png" alt="" />
							<span>拍照</span>
						</div> -->

                <!-- <div class="take-photo" @click="goPhoto(v)">
							<van-uploader
								@oversize="onOversize"
								:after-read="afterRead"
								capture="camera"
							>
								<img src="@/assets/Images/AppIcon/icon_camera.png" alt="" />
								<span>拍照</span>
							</van-uploader>
						</div> -->
                <div class="take-photo" v-if="hasPhoto" @click="goPhoto(v)">
                  <van-uploader
                    @oversize="onOversize"
                    :after-read="afterRead"
                    capture="camera"
                  >
                    <img src="@/assets/Images/AppIcon/icon_camera.png" alt="" />
                    <span>拍照</span>
                  </van-uploader>
                </div>
                <div @click="chooseClassifys(v)" class="take-photo" v-else>
                  <img src="@/assets/Images/AppIcon/icon_list_add.png" alt="" />
                  <span>选择</span>
                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <img
              class="none-data"
              src="@/assets/Images/AppIcon/common_empty_data.png"
              alt=""
            />
          </div>
        </van-list>
      </van-tab>
    </van-tabs>

    <!-- 弹出层 -->
    <van-dialog v-model="show" :showConfirmButton="false">
      <div class="dialog-content">
        <div class="dialog-title">详细信息</div>
        <div class="dialog-content-text">
          <div class="gist-source">
            <span class="dialog-description">来源：</span
            >{{ detail.GistSource }}
          </div>
          <div class="gist-source">
            <span class="dialog-description">隐患描述：</span
            >{{ detail.HiddenDangerDesc }}
          </div>
          <div class="gist-source">
            <span class="dialog-description">整改建议：</span
            >{{ detail.CorrectiveAdvise }}
          </div>
          <div class="gist-source">
            <span class="dialog-description">适用地区：</span
            >{{ detail.ApplyArea }}
          </div>
          <div class="gist-source">
            <span class="dialog-description">适用行业：</span
            >{{ detail.ApplyProfessionName }}
          </div>
          <div class="gist-source">
            <span class="dialog-description">法律责任：</span
            >{{ detail.LegalLiability }}
          </div>
          <div class="gist-source">
            <span class="dialog-description">法律原文：</span
            >{{ detail.OriginalText }}
          </div>
          <div class="gist-source">
            <span class="dialog-description">法律法规：</span>
            <div
              class="text-list"
              v-for="(v, i) in detail.TextList"
              :key="i"
              @click="toDetail(v)"
            >
              {{ v.Name }}
            </div>
          </div>
        </div>
        <div class="dialog-bottom">
          <div></div>
          <div>
            <span @click="close">取消</span>
            <span class="complete-btn" @click="confirm">确定</span>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {
  getClassifys,
  getHistoryFrequency,
  Collect,
  unCollected,
  getDetail,
  UnInterested,
} from "@/api/sytech/sytechDangerLawGist";
import { upload } from "@/api/common";
import { mapGetters } from "vuex";
import store from "@/store/index";
import { Toast } from "vant";
export default {
  data() {
    return {
      value: "",
      finished: false,
      loading: false,
      filter: {
        page: 0,
        dataType: "PublicUsed",
        cCode: "",
      },
      historyList: [],
      show: false,
      detail: {},
      vobj: {},
      fileList: [],
      id: "",
      hasPhoto: false,
    };
  },
  created() {
    if (this.$route.query.hasPhoto) {
      this.hasPhoto = this.$route.query.hasPhoto;
    }
    if (this.$route.params.id || this.$route.params.id == 0) {
      this.id = this.$route.params.id;
      const ClassifysData = this.$route.params;
      console.log("ClassifysData", ClassifysData);
      this.$store.commit("setClassifysData", ClassifysData);
    }
    if (this.$route.query.cName) {
      store.commit("updateTitle", this.$route.query.cName);
    }
    this.filter.cCode = this.$route.query.cCode;
    this.getHistoryFrequency();
  },
  computed: {
    ...mapGetters(["classifysChildren"]),
  },
  activated() {},
  // beforeRouteLeave(to, from, next) {
  // 	to.params.path = this.$route.params.path
  // 	to.params.id = this.$route.params.id
  // 	next() //继续下一步
  // },
  methods: {
    onClick(name, title) {
      this.filter.cCode = name;
      this.filter.page = 0;
      this.getHistoryFrequency();
      // console.log('asdad',name);
    },

    onSearch() {
      this.filter.page = 0;
      this.filter.keywords = this.value;
      this.getHistoryFrequency();
    },
    clearSearch() {
      this.filter.page = 0;
      this.filter.keywords = "";
      this.getHistoryFrequency();
    },
    // 选择检查依据
    chooseClassifys(item) {
      // if (this.id || this.id == 0) {
      // 	this.$router.push({
      // 		name: this.$route.params.path,
      // 		params: {
      // 			classifysData: item,
      // 		},
      // 	})
      // }
      this.id = this.$store.state.ClassifysData.id;
      const path = this.$store.state.ClassifysData.path;
      if (this.id || this.id == 0) {
        this.$router.push({
          name: path,
          params: {
            classifysData: item,
            id: this.id,
          },
        });
      }
    },
    goPhoto(item) {
      this.vobj = item;
    },
    // 上传图片
    afterRead(file) {
      let params = new FormData(); //创建form对象
      params.append("file", file.file);
      upload(params)
        .then((res) => {
          res.data.forEach((item) => {
            this.fileList.push(item.FilePath);

            this.$router.push({
              name: "DangerCheckTaskDetailEdit",
              params: {
                file: item.FilePath,
                vobj: this.vobj,
              },
              query: {
                ctCode: this.$route.query.ctCode || "",
                originType: 2,
              },
            });
          });
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    onOversize(file) {
      Toast("文件大小不能超过 2M");
    },
    onLoad() {
      this.loading = true;
      ++this.filter.page;
      getHistoryFrequency(this.filter).then((res) => {
        this.loading = false;
        this.filter.page = res.data.PageIndex;
        this.historyList = this.historyList.concat(res.data.Data);
        if (!res.data.HasNextPage) {
          this.finished = true;
        }
      });
    },
    getHistoryFrequency() {
      this.loading = true;
      getHistoryFrequency(this.filter).then((res) => {
        // console.log(res, 'res')
        this.loading = false;
        if (!res.data.HasNextPage) {
          this.finished = true;
        }
        this.filter.page = res.data.PageIndex;
        this.historyList = res.data.Data;
      });
    },
    // 收藏
    Collect(item) {
      const param = {
        lgCode: item.LGCode,
      };
      Collect(param).then((res) => {
        // console.log(res, 'res')
        this.filter.page = 0;

        this.getHistoryFrequency();
      });
    },
    // 取消收藏
    unCollected(item) {
      const param = {
        lgCode: item.LGCode,
      };
      unCollected(param).then((res) => {
        // console.log(res, 'res')
        this.filter.page = 0;

        this.getHistoryFrequency();
      });
    },
    // 详细getDetail
    getDetail(item) {
      const param = {
        lgCode: item.LGCode,
      };
      this.show = true;
      getDetail(param).then((res) => {
        res.data.TextList = JSON.parse(res.data.TextList);
        this.detail = res.data;
      });
    },
    Ignored(item) {
      const param = {
        lgCode: item.LGCode,
      };
      const _this = this;
      this.$dialog
        .confirm({
          title: "询问",
          message: "确定要忽略此条依据吗？",
        })
        .then(() => {
          console.log(11111111);
          UnInterested(param).then((res) => {
            _this.getHistoryFrequency();
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 关闭
    close() {
      this.show = false;
    },
    confirm() {
      this.show = false;
    },
  },
};
</script>
<style lang="less" scoped>
.info_search {
  padding: 10px;
  border-radius: 5px !important;
  .van-field__control {
    background-color: #ffffff !important;
  }
}
</style>
<style lang="less" scoped>
.classifys-detail {
  min-height: 100vh;
  background-color: #e8f1f8;
}
.all_dep {
  background-color: #ffffff;
}

.history-content {
  overflow: hidden;
  padding: 10px;
  background-color: #fff;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.3;
  .line {
    width: 100%;
    height: 0.5px;
    background-color: #eee;
    margin: 5px;
  }
}
.none-data {
  width: 100%;
  height: 100%;
}

.apply-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  .detail-collect {
    display: flex;
    align-items: center;

    > div {
      font-size: 14px;
      display: flex;
      align-items: center;
      margin-right: 10px;
    }
  }
  .take-photo {
    display: flex;
    align-items: center;
    img {
      width: 16px;
      height: 18px;
      vertical-align: middle;
    }
  }
  img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
}
</style>
